<template>
  <div class='mt5container'>
    <div class="bannerbox">
      <div>
        <div class="bannertitlebox">
          <p>MT5 WebTrader</p>
          <p>No download required, access leading trading platform</p>
          <p>from around the world from your browser</p>
          <button @click="onGoPage()">Enter The MetaTrader Web Terminal</button>
        </div>
        <img src="./images/1@2x.png" alt="">
      </div>
    </div>
    <div class="tabbox">
      <div :class="state.tabindex+''=='0'?'active':null" @click="onTab(0)">
        MT5 Desktop
      </div>
      <div :class="state.tabindex+''=='1'?'active':null" @click="onTab(1)">
        MT5 WebTrader
      </div>
      <div :class="state.tabindex+''=='2'?'active':null" @click="onTab(2)">
        MT5 Mobile
      </div>
    </div>
    <desktop v-if="state.tabindex==0"></desktop>
    <webtrader v-if="state.tabindex==1"></webtrader>
    <Mobile v-if="state.tabindex==2"></Mobile>
    <Footer></Footer>
  </div>
</template>

<script lang='ts'>

  import { defineComponent, reactive, onMounted ,watch} from 'vue'
  import { useRoute,useRouter } from 'vue-router'
  import webtrader from './components/webtrader.vue'
  import desktop from './components/desktop.vue'
  import Footer from '@/components/footer.vue'
  import Mobile from './components/mobile.vue'
  export default defineComponent({

    name: 'PageNotFound',

    props: {},

    components: {
      webtrader,
      desktop,
      Footer,
      Mobile
    },

    setup() {
      let route = useRoute();
      let router = useRouter();
      const state = reactive({
        tabindex:0,
      })

      watch(
        () => route.path,
        (newPath, oldPath) => {
          getTabIndex(newPath)
          // 在这里执行你的逻辑
        }
      );
      onMounted(() => {
        let anchorId:any = route.hash;
        console.log(route.hash)
        if(anchorId){
          let data = anchorId.split('#');
          console.log(data[1])
          let data2 = data[1];
          router.push({ hash: `#${data2}` }).then(() => {
            const element = document.getElementById(data2);
            if (element) {
              element.scrollIntoView({ behavior: 'smooth' });
            }
          });
        }
        getTabIndex(route.path)
      });

      const getTabIndex=(path:string)=>{
        if(path=='/mt5/desktop'){
          state.tabindex = 0;
        }else if(path=='/mt5/webtrader'){
          state.tabindex = 1;
        }else{
          state.tabindex = 2;
        }
      }

      const onTab=(data:number)=>{
        if(state.tabindex == data){
          return;
        }
        state.tabindex = data;
      }

      const onGoPage=()=>{
        window.open('https://web.metatrader.app/terminal','_blank');
      }

      return {
        state,
        onTab,
        onGoPage
      }

    }

  })
</script>
<style lang="scss" scoped>
  @use './index.scss'
</style>